<template>
    <el-form :model="skuInfo" label-width="80px">
        <el-form-item label="SPU名称">{{ spu.spuName }}</el-form-item>
        <el-form-item label="SKU名称">
            <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)">
            <el-input placeholder="重量(千克)" type="number" v-model="skuInfo.weight"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
            <el-input placeholder="规格描述" type="textarea" v-model="skuInfo.skuDesc" rows="4"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true">
                <!-- 
                    1.字符串拼接
                    2.如何收集?收集到哪里去?
                -->
                <el-form-item
                    :label="attrInfo.attrName"
                    v-for="attrInfo in attrInfoList"
                    :key="attrInfo.id"
                >
                    <el-select v-model="attrInfo.attrIdAttrValueId" placeholder="请选择">
                        <el-option
                            :label="attrValue.valueName"
                            :value="`${attrInfo.id}:${attrValue.id}`"
                            v-for="attrValue in attrInfo.attrValueList"
                            :key="attrValue.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form :inline="true">
                <el-form-item
                    :label="spuSaleAttr.saleAttrName"
                    v-for="spuSaleAttr in spuSaleAttrList"
                    :key="spuSaleAttr.id"
                >
                    <el-select v-model="spuSaleAttr.attrIdAttrValueId" placeholder="请选择">
                        <el-option
                            :label="saleAttr.saleAttrValueName"
                            :value="`${spuSaleAttr.id}:${saleAttr.id}`"
                            v-for="saleAttr in spuSaleAttr.spuSaleAttrValueList"
                            :key="saleAttr.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片列表">
            <el-table
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :data="spuImageList"
                border
            >
                <el-table-column type="selection" width="80" align="center"></el-table-column>
                <el-table-column label="图片" width="width">
                    <template slot-scope="{row}">
                        <img :src="row.imgUrl" style="width:100px;height:80px" />
                    </template>
                </el-table-column>
                <el-table-column prop="imgName" label="名称" width="width"></el-table-column>
                <el-table-column label="操作" width="width">
                    <template slot-scope="{row,$index}">
                        <el-button
                            v-if="!row.isDefault"
                            type="primary"
                            size="mini"
                            @click="changeDefaultImgIndex(spuImageList, $index)"
                        >设置默认</el-button>
                        <el-tag v-else type="success">默认</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save()">保存</el-button>
            <el-button @click="backDie()">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'Skuform',
    data() {
        return {
            spu: '',
            /* 收集ajax返回的结果 */
            attrInfoList: [],        //平台属性
            spuSaleAttrList: [],     //销售属性
            spuImageList: [],        //图片集

            skuImageList: [],       //收集到的图片,需要整理

            skuInfo: {
                /* 爹传的 */
                category3Id: '',
                spuId: '',
                tmId: '',
                /* 用户输入 */
                weight: "",
                price: '',
                skuName: "",
                skuDesc: "",
                skuAttrValueList: [
                    // {
                    //     attrId: '',
                    //     valueId: '',
                    // }
                ],
                skuSaleAttrValueList: [
                    // {
                    //     saleAttrId: '',
                    //     saleAttrValueId: '',
                    // }
                ],
                skuImageList: [
                    // {
                    //     imgName: "",
                    //     imgUrl: "",
                    //     isDefault: "",
                    //     skuId: '',
                    //     spuImgId: ''
                    // }
                ],
                skuDefaultImg: "",
            }
        }
    },
    methods: {
        backDie() {
            this.$emit('update:isShowSkuList', false)
        },
        async save() {
            let { spu, attrInfoList, spuSaleAttrList, skuImageList } = this
            this.skuInfo.category3Id = spu.category3Id
            this.skuInfo.spuId = spu.id
            this.skuInfo.tmId = spu.tmId

            /* 收集平台属性 */
            attrInfoList.forEach(item => {
                if (item.attrIdAttrValueId) {
                    let [attrId, valueId] = item.attrIdAttrValueId.split(":")
                    let obj = {
                        attrId,
                        valueId
                    }
                    this.skuInfo.skuAttrValueList.push(obj)
                }
            })
            /* 收集销售属性 */
            spuSaleAttrList.forEach(item => {
                if (item.attrIdAttrValueId) {
                    let [saleAttrId, saleAttrValueId] = item.attrIdAttrValueId.split(":")
                    let obj = {
                        saleAttrId,
                        saleAttrValueId
                    }
                    this.skuInfo.skuSaleAttrValueList.push(obj)
                }
            })
            /* 整理图片 */
            skuImageList.forEach(item => {
                item.spuImgId = item.id
                item.imgName = item.imgName
                item.imgUrl = item.imgUrl
                item.isDefault = item.isDefault || 0
                item.skuId = item.spuId
                if (item.isDefault) {
                    this.skuInfo.skuDefaultImg = item.imgUrl
                }
            })
            // this.skuInfo.skuImageList = skuImageList.map(item => {
            //     if (item.isDefault) {
            //         this.skuInfo.skuDefaultImg = item.imgUrl
            //     }
            //     return {
            //         spuImgId: item.id,
            //         imgName: item.imgName,
            //         imgUrl: item.imgUrl,
            //         isDefault: item.isDefault || 0,
            //         skuId: item.spuId
            //     }
            // })
            // console.log(this.skuInfo);
            // return;

            this.skuInfo.skuImageList = skuImageList
            const result = await this.$API.sku.addUpdate(this.skuInfo)
            if (result.code == 200 || result.code === 20000) {
                /* 
                    1.清空data
                    2.返回的组件
                */
                Object.assign(this._data, this.$options.data())
                this.backDie()
            }
        },
        changeDefaultImgIndex(spuImageList, index) {
            // spuImageList.forEach(item => item.isDefault = 0)
            spuImageList.forEach(item => this.$set(item, 'isDefault', 0))
            spuImageList[index].isDefault = 1
        },
        /* 收集的图片集,往sku中添加的 */
        handleSelectionChange(val) {
            // console.log(val);
            this.skuImageList = val
        },
        async addSkuInfo(category1Id, category2Id, spu) {
            console.log(category1Id, category2Id, spu);
            this.spu = spu
            /* 父组件传入 */
            /* 获取平台属性 */
            // http://localhost:9529/dev-api/admin/product/attrInfoList/2/14/63
            // getAttrInfoList({ category1Id, category2Id, category3Id }) attr
            let obj = {
                category1Id,
                category2Id,
                category3Id: spu.category3Id
            }
            let promise1 = this.$API.attr.getAttrInfoList(obj);

            /* 获取销售属性 */
            // http://localhost:9529/dev-api/admin/product/spuSaleAttrList/6702
            // getSpuSaleAttrList (spuId) sku
            let promise2 = this.$API.sku.getSpuSaleAttrList(spu.id)

            /* 获取spu的图片 */
            // http://localhost:9529/dev-api/admin/product/spuImageList/6702
            // getSpuImageList (spuId) sku
            let promise3 = this.$API.sku.getSpuImageList(spu.id)

            const result = await Promise.all([promise1, promise2, promise3])
            this.attrInfoList = result[0].data
            this.spuSaleAttrList = result[1].data
            this.spuImageList = result[2].data
        }
    }
};
</script>

<style lang='scss' scoped>
</style>

